<template>
  <el-card class="mt15 mb15">
    <!-- 第一行——操作按钮 -->
    <div class="filter-container"><el-button icon="el-icon-document-add" type="primary" @click="editShow('添加')">新增</el-button></div>
    <!-- / 第一行——操作按钮 -->

    <!-- table表格 -->
    <el-table :key="tableKey" v-loading="listLoading" :data="list" fit stripe highlight-current-row style="width: 100%;">
      <!-- 缩略图 -->
      <el-table-column align="center" label="缩略图" width="150px">
        <!-- 图片 -->
        <template slot-scope="{ row }">
          <el-image class="banner-poster" :src="row.image_dictText" />
        </template>
      </el-table-column>

      <!-- 标题 -->
      <el-table-column align="center" prop="title" label="标题" width="200px">
        <template slot-scope="{ row }">
          {{ row.title ? row.title : '-' }}
        </template>
      </el-table-column>

      <!-- 图片链接 -->
      <el-table-column align="center" prop="redirect" label="图片链接">
        <template slot-scope="{ row }">
          {{ row.redirect ? row.redirect : '-' }}
        </template>
      </el-table-column>

      <!-- 是否新页面打开 -->
      <el-table-column align="center" prop="open" label="是否新页面打开" width="138px">
        <template slot-scope="{ row }">
          <span v-if="row.open">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <!-- 状态 -->
      <el-table-column label="状态" align="center" width="60px">
        <template slot-scope="{ row }">
          {{ row.disabled ? '禁用' : '启用' }}
        </template>
      </el-table-column>

      <!-- 排序 -->
      <el-table-column align="center" prop="sequence" label="排序" width="50px">
        <template slot-scope="{ row }">
          {{ row.sequence ? row.sequence : '-' }}
        </template>
      </el-table-column>

      <!-- 创建时间 -->
      <el-table-column align="center" prop="createTime" label="创建时间" width="180px" />

      <!-- 操作 -->
      <el-table-column label="操作" align="center" width="130px" fixed="right">
        <template slot-scope="{ row, $index }">
          <el-button type="text" @click="editShow('编辑', row)">编辑</el-button>
          <el-button type="text" @click="delItem(row, $index)">删除</el-button>
          <!-- <el-button type="text" @click="topItem(row)">置顶</el-button> -->
        </template>
      </el-table-column>
      <!-- / 操作 -->
    </el-table>
    <!-- / table表格 -->

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      next-text="下一页"
      layout="prev, pager, next, jumper"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
    <!-- / 分页 -->

    <edit-drawer ref="editDrawer" @refresh="refresh" />
  </el-card>
</template>

<script>
import Pagination from '@/components/Pagination'
import editDrawer from './components/editDrawer'
import { blockList, blockDataDel } from '@/api/block'
export default {
  name: '',
  components: { Pagination, editDrawer },
  props: {},
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        id: '',
        sort: false
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.listQuery.id = this.$route.query.id
    this.getList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 销毁
  destroyed() {},
  // 方法
  methods: {
    // 列表
    getList() {
      this.listLoading = true
      blockList(this.listQuery).then(response => {
        this.list = response.result.records
        this.total = response.result.total
        this.listLoading = false
      })
    },
    // 打开
    editShow(title, rowData) {
      console.log(this.$route.path)
      this.$refs.editDrawer.show(title, this.listQuery.id, parseFloat(this.$route.query.bw), parseFloat(this.$route.query.bh), rowData)
    },
    // 置顶
    // topItem(rowData) {
    //   this.$refs.editDrawer.topThis(rowData)
    // },
    // 子组件更新
    refresh() {
      this.getList()
    },
    // 删除
    delItem(e, index) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          blockDataDel({ id: e.id }).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.refresh()
          })
          // this.list.splice(index, 1)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.banner-poster {
  display: block;
  height: 50px;
}
</style>
